import { useState } from "react";
import { Link, Route, Routes } from "react-router-dom";
// 获取pages目录下的2个页面，用来做路由跳转
const pages = import.meta.globEager("./pages/*.jsx");
//生成 routes 对象
const routes = Object.keys(pages).map((path) => {
  const name = path.match(/\.\/pages\/(.*)\.jsx$/)[1];
  return {
    name,
    path: name === "Home" ? "/" : `/${name.toLowerCase()}`,
    component: pages[path].default,
  };
});
console.log(routes, "Routes");
function App() {
  const [count, setCount] = useState(0);
  return (
    <div className="App">
      <h1>Vite + React + ssr</h1>
      {/* ul列表，点击发生路由跳转 */}
      <ul>
        {routes.map(({ name, path }) => {
          return (
            <li key={path}>
              <Link to={path}>{name}</Link>
            </li>
          );
        })}
      </ul>
      {/* 显示路由对应的页面 */}
      <Routes>
        {routes.map(({ path, component: RouteComp }) => {
          return <Route key={path} path={path} element={<RouteComp />}></Route>;
        })}
      </Routes>
    </div>
  );
}

export default App;
